<template>
  <th-card :title="form.projectName">
    <!-- <th-card title="附件"> -->
    <th-form-item label="需求产品" class="form-demandDesc" v-if="form.taskInvName">
      <text class="text">{{ form.taskInvName }}</text>
    </th-form-item>
    <th-form-item label="产品规格" class="form-demandDesc" v-if="form.taskInvStd">
      <text class="text">{{ form.taskInvStd }}</text>
    </th-form-item>

    <!-- <th-form-item
    label=""
    style="flex-direction: column; align-items: start"
    v-if="form.rdTaskFileEntity.length"
  > -->
    <view style="overflow: auto" class="table-container" v-if="checkTargetList.length">
      <table class="analysis-table">
        <tbody>
          <tr>
            <th style="width: 320rpx; min-width: 9.5rem">检验指标名称</th>
            <th style="width: 280rpx; min-width: 280rpx">U8指标</th>
            <th style="width: 280rpx; min-width: 280rpx">客户指标</th>
            <th style="width: 280rpx; min-width: 280rpx">描述</th>
          </tr>
          <tr
            align="center"
            v-for="(item, index) in checkTargetList"
            :key="index"
            :class="[item.checktarget != item.cusCheckTarget ? 'line-red' : '']"
          >
            <td>
              {{ item.standardName }}
            </td>
            <td>
              {{ item.standardValue }}
            </td>
            <td>
              {{ item.standardValuePm }}
            </td>
            <td>
              {{ item.standardDesc }}
            </td>
          </tr>
        </tbody>
      </table>
    </view>
  </th-card>

  <!-- <th-card title="外来样报检报告"> -->
  <template v-if="form.id && form.checkFlag == '1'">
    <assayReport :pid="form.id" :version="0"></assayReport>
  </template>
  <!-- </th-card> -->
  <!-- </th-form-item> -->

  <th-card title="附件" v-if="form.rdTaskFileEntity && form.rdTaskFileEntity.length">
    <view class="info-list">
      <view class="info-list-main">
        <view class="info-list-row">
          <view class="info-list-value">
            <view style="display: flex; flex-direction: column">
              <view
                v-for="file in form.rdTaskFileEntity"
                :key="file.id"
                @click="previewFileHandle(file.fileUrl)"
                class="info-row-item"
              >
                {{ file.fileName }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </th-card>
</template>
<script lang="tsx" setup>
// import assayReport from '@/pages/pm/assay-report/component/assayReport.vue';
import assayReport from './assayReport.vue';

const form = reactive({
  taskInvCode: '',
  taskInvName: '',
  taskInvStd: '',
  id: '',
  projectName: '',
  checkFlag: '0',
  rdTaskFileEntity: [],
});

const checkTargetList = ref([]);

const init = (row) => {
  // form.rdInformationDTO = row.rdInformationDTO;
  // form.rdCraftEntity = row.rdCraftEntity;
  // form.rdTaskFileEntity = row.rdTaskFileEntity;
  // form.others = row.others;

  form.checkFlag = row.checkFlag;
  form.id = row.id;
  form.taskInvStd = row.taskInvStd;
  form.taskInvName = row.taskInvName;
  form.taskInvCode = row.taskInvCode;
  form.projectName = row.projectName;
  checkTargetList.value = row.rdTaskStandardEntity
    .filter((item) => item.delFlag != 1)
    .map((item) => {
      return {
        ...item,
        standardName: item.standardName,
        standardCode: item.standardCode,
        standardValue: item.standardValue,
        standardValuePm: item.standardValuePm,
      };
    });
  form.rdTaskFileEntity = row.rdTaskFileEntity;
};

const previewFileHandle = (file) => {
  uni.navigateTo({
    url: '/pages/pm/preview-online?url=' + file,
  });
};

defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
@import '../../experiment/components/table';

.info-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 24rpx;

  .info-list-main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;

    // padding: 10rpx;
    // margin: 0 24rpx;

    // border: 1px solid #e3e3e3;
    border-radius: 8rpx;

    .info-list-row {
      display: flex;
      width: 100%;

      .info-list-label {
        width: 160rpx;
        margin-right: 12rpx;
        font-size: 28rpx;
        color: #808080;
      }

      .info-list-value {
        display: flex;
        flex: 1;
        align-items: center;
        width: 0;
        word-break: break-all;
        white-space: pre-line;
      }
    }
  }
}

.craft-row {
  display: flex;
  align-items: center;

  .craft-row-img-main {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 0;
  }
}

.craft-row-img {
  width: 240rpx;
  height: 240rpx;
}

.form-demandDesc {
  align-items: flex-start !important;

  .text {
    word-break: break-all;
  }
}

.line-red {
  background-color: #ffecec !important;
}
</style>
